<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>猜歌名</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>猜歌名小游戏</h1>

    <!-- 第一题 -->
    <div class="question" id="question1">
      <img src="image1.jpg" alt="Question 1" class="question-img" />
      <p>提示: 五个字</p>
      <input type="text" id="answer1" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer1', '葡萄成熟时', 'question1')">提交答案</button>
      <p id="answer1a" class="hint hidden">提示1：冬至必听</p>
      <p id="answer1b" class="hint hidden">提示2：eason的粤语歌</p>
      <button class="hidden" onclick="showAnswer('answer1', '葡萄成熟时')">查看答案</button>
      <button id="next1" class="next-btn hidden" onclick="nextQuestion('question1', 'question2')">下一题</button>
    </div>

    <!-- 第二题 -->
    <div class="question hidden" id="question2">
      <img src="image2.jpg" alt="Question 2" class="question-img" />
      <p>提示: 五个字</p>
      <input type="text" id="answer2" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer2', '冬天一个游', 'question2')">提交答案</button>
      <p id="answer2a" class="hint hidden">提示1：风格为R＆B</p>
      <p id="answer2b" class="hint hidden">提示2：歌名前两个字是四季的最后一季</p>
      <button class="hidden" onclick="showAnswer('answer2', '冬天一个游')">查看答案</button>
      <button id="next2" class="next-btn hidden" onclick="nextQuestion('question2', 'question3')">下一题</button>
      <button id="prev2" class="prev-btn hidden" onclick="prevQuestion('question2', 'question1')">上一题</button>
    </div>

    <!-- 第三题 -->
    <div class="question hidden" id="question3">
      <img src="image3.jpg" alt="Question 3" class="question-img" />
      <p>提示: 三个字</p>
      <input type="text" id="answer3" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer3', '坏女孩', 'question3')">提交答案</button>
      <p id="answer3a" class="hint hidden">提示1：歌词出自一首情歌</p>
      <p id="answer3b" class="hint hidden">提示2：歌手是徐良</p>
      <button class="hidden" onclick="showAnswer('answer3', '坏女孩')">查看答案</button>
      <button id="next3" class="next-btn hidden" onclick="nextQuestion('question3', 'question4')">下一题</button>
      <button id="prev3" class="prev-btn hidden" onclick="prevQuestion('question3', 'question2')">上一题</button>
    </div>

    <!-- 第四题 -->
    <div class="question hidden" id="question4">
      <img src="image4.jpg" alt="Question 4" class="question-img" />
      <p>提示: 三个字</p>
      <input type="text" id="answer4" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer4', '九月底', 'question4')">提交答案</button>
      <p id="answer4a" class="hint hidden">提示1：关于月份的</p>
      <p id="answer4b" class="hint hidden">提示2：your favorite</p>
      <button class="hidden" onclick="showAnswer('answer4', '九月底')">查看答案</button>
      <button id="next4" class="next-btn hidden" onclick="nextQuestion('question4', 'question5')">下一题</button>
      <button id="prev4" class="prev-btn hidden" onclick="prevQuestion('question4', 'question3')">上一题</button>
    </div>

    <!-- 第五题 -->
    <div class="question hidden" id="question5">
      <img src="image5.jpg" alt="Question 5" class="question-img" />
      <p>提示: 五个字</p>
      <input type="text" id="answer5" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer5', '不对等天体', 'question5')">提交答案</button>
      <p id="answer5a" class="hint hidden">提示1：洛希极限</p>
      <p id="answer5b" class="hint hidden">提示2：歌手：🐟xx</p>
      <button class="hidden" onclick="showAnswer('answer5', '不对等天体')">查看答案</button>
      <button id="next5" class="next-btn hidden" onclick="nextQuestion('question5', 'question6')">下一题</button>
      <button id="prev5" class="prev-btn hidden" onclick="prevQuestion('question5', 'question4')">上一题</button>
    </div>

    <!-- 第六题 -->
    <div class="question hidden" id="question6">
      <img src="image6.jpg" alt="Question 6" class="question-img" />
      <p>提示: 四个字</p>
      <input type="text" id="answer6" placeholder="请输入歌名" />
      <button onclick="checkAnswer('answer6', '无地自容', 'question6')">提交答案</button>
      <p id="answer6a" class="hint hidden">提示1：KTV抽象神曲</p>
      <p id="answer6b" class="hint hidden">提示2：歌手有韩红、陶喆、孙楠、萧敬腾、黄绮珊</p>
      <button class="hidden" onclick="showAnswer('answer6', '无地自容')">查看答案</button>
      <button id="next6" class="next-btn hidden" onclick="nextQuestion('question6', 'result-section')">下一题</button>
      <button id="prev6" class="prev-btn hidden" onclick="prevQuestion('question6', 'question5')">上一题</button>
    </div>

    <!-- 恭喜成为最强歌王部分 -->
    <div id="result-section" class="hidden">
      <p id="result">恭喜你成为最强歌王！！！</p>
      <button id="celebrate" class="btn hidden" onclick="window.location.href='cake.html'">进入庆祝环节</button>
    </div>
  </div>

  <script src="game.js"></script>
</body>
</html>
